import React from 'react'
// ===================================================================== Temp
import Table from '#cpt/temp/Table'
import SearchForm from '#cpt/temp/SearchForm'
import Controls from '#cpt/temp/Controls'
import TableControls from '#cpt/temp/TableControls'
import Delete from '#cpt/temp/Delete'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Page 					= $Lazy.load(()=>import('#tp/page/page-container'))
const $cache 				= $Lazy.file(()=>import('#private/cache-api'))
const ModalComponent 		= $Lazy.state(()=>import('./cpt/modal'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		// 搜索表单列表
		forms : [
			{ label: '权限名称',		name: 'perm_name' },
			{ label: '权限代码',		name: 'perm_code' },
			{ label: '权限类型',		name: 'perm_type',	type: 'select', loading:true, idStr:'code' },
			{ label: '权限级别',		name: 'level',	type: 'select', loading:true },
		]
	}
	
	model = {}
	
	componentDidMount(){
		const { uuid, route }  = $fn.query()
		
		if(uuid){
			this.query = { uuid }
			this.uuid = uuid
			this.route = route
		}
		this.getSelect()
		
		this.fetch()
	}
	// 获取下拉数据
	getSelect = () => {
		const { forms } = this.state
		
		$cache.then( async f => {
			// 权限类型
			const typeData = $fn.setRow(forms, 'perm_type',  await f.getDicCache({ code:900 } ))
			// 权限级别
			$fn.setRow(forms, 'level',  await f.permissions_level)
			this.setState({ forms, typeData })
		})
	}
	
	// paging
	fetch = () => $fn.fetch.call(this, this.route + '/permissionList')
	
	// 表单
	cols = [
		{ title: '权限名称', 	dataIndex: 'perm_name', 			width:250 },
		{ title: '权限代码', 	dataIndex: 'perm_code', 			},
		{ title: '英文名称',		dataIndex: 'perm_name_en', 			width:150 },
		{ title: '权限级别', 	dataIndex: 'level_name', 			width:100, align:'center' },
		{ title: '权限类型', 	dataIndex: 'perm_type_name', 		width:150 },
		TableControls.controls.call(this)
	]
	// 表格操作按钮
	table_controls = (text, {uuid}) => {
		return [
			this.onDel(uuid),															// 删除
		]
	}
	// 操作按钮
	controls = () => {
		return [
			Controls.click.call(this, '添加', ()=> this.modal.open()),			// 添加
			Controls.back.call(this ),			// 返回
		]
	}
	// 删除
	onDel = uuid => Delete.call(this, this.route + '/delperm', { uuid, isKeys: !uuid })
		
	render(){
		return (
			<>
				<Page title='关联权限库' controls={this.controls()}>
					{/* 搜索 */}
					{ SearchForm.call(this) }
					{/* 表格 */}
					{ Table.call(this) }
				</Page>
				{/* 表格 */}
				<ModalComponent onRef={ref=>this.modal=ref} uuid={this.uuid} route={this.route}  typeData={this.state.typeData} onRefresh={this.fetch} />
			</>
		)
	}
}

export default Index